<script setup lang="ts">

//导入顶部导航栏
import CustomNavbar from './componets/CustomNavbar.vue'
import { getCategoryAPI, getHomeBannerAPI, getHomeHotAPI } from '@/pages/service/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'
import CategoryPanel from '@/pages/index/componets/CategoryPanel.vue'
import type { CategoryItem } from '@/types/CategoryItem'
import HotPanel from '@/pages/index/componets/HotPanel.vue'
import type { HotItem } from '@/types/hotItem'
import XtxGuess from '@/components/XtxGuess.vue'
import PageSkeleton from '@/pages/index/componets/pageSkeleton.vue'
import { useGuessList } from '@/composables'


//////////////////////////////////////// 获取首页轮播图数据
//定义数组存储轮播图数据
const bannerList = ref<BannerItem[]>([])
//调用api获取轮播图数据
const getHomeBannerDate = async () =>  {
  const res = await getHomeBannerAPI()
  // console.log(res)
  bannerList.value = res.result
}
//////////////////////////////////////////////////////////首页分类
//定义数组保存数据
const categoryList = ref<CategoryItem[]>([])
//调用api获取分类数据
const getCategoryDate = async () => {
  const res = await getCategoryAPI()
  categoryList.value = res.result
  // console.log(res)
}
/////////////////////////////////////////////////////////热门推荐
//定义数组保存数据
const homeHotList = ref<HotItem[]>([])

//调用Api获取热门分类数据
const getHomeHotDate = async () => {
  const result = await getHomeHotAPI()
  homeHotList.value = result.result
  // console.log(result)
}
//////////////////////////////////////////////////////////////// 猜你喜欢分页
//获取猜你喜欢组件的实例，XtxGuessInstance 在component.d.ts文件中声明了
//guessRef是定义的模板ref
// const guessRef = ref<XtxGuessInstance>()
//
// //执行时机- 容器滑倒底部时触发
// const onScrolltolower = () => {
//   // console.log('容器滑倒底部时触发')
//   //父调子（XtxGuess.vue）方法,getMore已经在子组件中暴露
//   guessRef.value?.getMore()
// }
//调用猜你喜欢组合式函数,里面封装了获取猜你喜欢实例和滚动触底事件函数
//{}结构里面的返回值
const {guessRef,onScrolltolower} = useGuessList()

///////////////////////////////////////////////////////////////首页-下拉刷新
//定义booler值控制下拉刷新动画关闭和打开
const isTriggered = ref(false)

//自定义下拉刷新函数
const onRefresherrefresh = async () => {
  // console.log('自定义下拉刷新函数')
  //开始动画
  isTriggered.value = true
  //在这里调用轮播图，热门推荐，猜你喜欢API，重新发起请求
  //在前面加await加载速度太慢，需要优化
  // await getHomeBannerDate()
  // await getCategoryDate()
  // await getHomeHotDate()

  //调用子组件的重置数据方法
  guessRef.value?.resultDate()
  //优化之后的代码
  await Promise.all([getHomeBannerDate(),getCategoryDate(),getHomeHotDate(),guessRef.value?.getMore()])
  //关闭动画
  isTriggered.value = false
}
//////////////////////////////////////////////////////////////骨架屏
//定义变量控制骨架屏加载时显示
const isLoading = ref(false)


/////////////////////////////////////////////////狗子函数
//uniapp有生命周期函数（钩子函数）,页面加载调用
onLoad(async() => {
  //页面加载时显示骨架屏
  isLoading.value = true
  //异步加载数据
  await Promise.all([
    getHomeBannerDate(),
    getCategoryDate(),
    getHomeHotDate()
  ])

  //页面加载完成关闭骨架屏
  isLoading.value = false
})



</script>

<template>
<!--首页导航栏-->
  <CustomNavbar/>
  <!--
    滚动容器 ，x - 水平滑动，y - 垂直滑动
    @scrolltolower - 绑定容器触底事件
    refresher-enabled 开启下拉刷新
    @refresherrefresh - 监听事件，自定义下拉刷新函数
    :refresher-triggered 表示关闭动画-->
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
  >
<!--    骨架屏-->
    <pageSkeleton v-if="isLoading"/>
    <template v-else>
      <!--  自定义轮播图-->
      <XtxSwiper :list="bannerList"/>
      <!--  首页分类-->
      <category-panel :list="categoryList"/>
      <!--首页推荐组件-->
      <hot-panel :list="homeHotList"/>
      <!--猜你喜欢组件 绑定ref模板，目的为了完成父调子-->
      <xtx-guess ref="guessRef"/>
    </template>
  </scroll-view>
</template>

<style lang="scss">
//修改底色为灰色，小程序跟标签为page
page{
  background-color: #f7f7f7;
  height:100%;
  display: flex;
  //调整方向为垂直
  flex-direction: column;
}
.scroll-view{
  //为了容器标签沾满剩余高度
  flex: 1;
}

</style>
